<template>
  <div class="app-container">
    <aside>
      <el-form ref="form" :model="form" label-width="80px" :inline="true" class="search-form">
        <el-form-item>
          <el-select v-model="form.company">
            <el-option value="" label="选择品牌" />
            <el-option v-for="(item, index) of company.array" :key="'com' + index" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.status">
            <el-option value="" label="选择状态" />
            <el-option v-for="(type, index) of types" :key="index" :label="type.label" :value="type.val" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <city v-if="!cleanCityActive" class="flex1" :len="2" @change="id => form.city = id" />
            <el-tag v-if="form.city" type="danger" closable @click="cleanCity">清除</el-tag>
          </div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.mobile" placeholder="手机" />
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-search" type="primary" @click="tableData.current_page = 0">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-download" type="primary" @click="download">导出</el-button>
        </el-form-item>
      </el-form>
    </aside>
    <el-container>
      <el-main class="pd-0">
        <el-table :data="tableData.data" border stripe highlight-current-row height="70vh">
          <af-table-column label="id" prop="id" width="50" />
          <af-table-column label="状态" width="100">
            <template slot-scope="{row}">
              <span v-if="row.status === 0">未预约</span>
              <span v-else-if="row.status === 1">待确认</span>
              <span v-else-if="row.status === 2">待拍摄</span>
              <span v-else-if="row.status === 3">已完成</span>
              <span v-else-if="row.status === 8">退款申请中</span>
              <span v-else-if="row.status === 9">已取消</span>
            </template>
          </af-table-column>
          <af-table-column label="编号" prop="sn" width="180" />
          <af-table-column label="卡号" prop="company_card" width="100" />
          <af-table-column label="下单人" prop="user_name" width="80" />
          <af-table-column label="下单人手机号" prop="mobile" width="110" />
          <af-table-column label="拍摄人" prop="photoer_name" width="80" />
          <af-table-column label="拍摄人手机号" prop="photoer_mobile" width="110" />
          <af-table-column label="产品" width="250">
            <template slot-scope="{row}">
              <span>{{ row.companyinfo.name }}-{{ row.goodsinfo.name }}</span>
            </template>
          </af-table-column>
          <af-table-column label="门店" width="300">
            <template slot-scope="{row}">
              {{ row.cityinfo.name }}{{ row.shopinfo ? row.shopinfo.region_name + '丨' + row.shopinfo.name : '' }}
            </template>
          </af-table-column>
          <af-table-column label="预约时间" prop="short_time" width="100" />
          <af-table-column label="完成时间" prop="finish_at" width="100" />
          <!--<af-table-column label="修改次数" prop="update_count" />-->
          <af-table-column label="用户备注" prop="note" />
          <af-table-column label="客服备注" prop="kefu_note" />
          <af-table-column label="创建时间" prop="created_at" width="160" />
          <af-table-column label="管理" width="220">
            <template slot-scope="{row, $index}">
              <el-button v-if="row.status < 3" type="primary" size="mini" class="mg-left-2 mini" @click="toEditOrder(row)">编辑</el-button>
              <el-button v-if="row.status === 1" class="mg-left-2 mini" type="warning" size="mini" @click="confirm($index)">确认</el-button>
              <el-button v-if="row.status === 2" class="mini" type="warning" size="mini" @click="finish($index)">结束</el-button>
              <el-button v-if="row.status === 1 || row.status === 2" class="mini" type="danger" size="mini" @click="cancel(row.id)">取消</el-button>
              <!--<el-button v-if="row.status < 3" class="mini" size="mini" type="danger">核销</el-button>-->
            </template>
          </af-table-column>
        </el-table>
        <my-page :data="tableData" @change="page => { tableData.current_page = page }" />
      </el-main>
      <el-footer>
        <!--编辑订单-->
        <el-dialog ref="editModel" title="订单信息" :visible.sync="editStatus" :close-on-click-modal="false">
          <el-form ref="form" :model="order" label-width="140px">
            <el-form-item label="下单人手机">
              <el-input v-model="order.mobile" type="text" readonly />
            </el-form-item>
            <el-form-item label="下单人姓名">
              <el-input v-model="order.user_name" type="text" />
            </el-form-item>
            <el-form-item label="拍摄人姓名">
              <el-input v-model="order.photoer_name" type="text" />
            </el-form-item>
            <el-form-item label="拍摄人手机号">
              <el-input v-model="order.photoer_mobile" type="text" />
            </el-form-item>
            <el-form-item label="服务门店">
              <div class="flex">
                <!--<city style="width: 100%;" :city.sync="order.city" :len="2" @change="setCity" />-->
                <el-select v-model="order.shop" placeholder="请选择门店" style="width: 300px;margin-left: 10px;">
                  <el-option :value="0" label="选择门店">选择门店</el-option>
                  <el-option v-for="(item, index) of shops" :key="'shop' +index" :label="item.name" :value="item.id" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="拍摄时间">
              <!-- <el-date-picker v-model="order.date" type="date" align="right" value-format="yyyy-MM-dd" /> -->
              <div class="flex">
                <el-input v-model="order.date" type="date" @input="$forceUpdate()" />
                <el-select v-model="order.time">
                  <el-option v-for="(time,index) of times" :key="index" :value="time" :label="time">{{ time }}</el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="客服备注">
              <el-input v-model="order.kefu_note" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import company from '@/api/company'
import order from '@/api/order'
import MyPage from '@/components/MyPage/index'
import city from '@/components/ORM/components/city'
// import orm from '@/api/orm'
// import { parseTime } from '@/utils/index'
import orm from '@/api/orm'

export default {
  name: 'OrderIndex' + (new Date()).getTime(),
  components: { MyPage, city },
  data() {
    return {
      types: [{
        label: '未预约',
        val: 0
      }, {
        label: '待确认',
        val: 1
      }, {
        label: '待拍摄',
        val: 2
      }, {
        label: '已完成',
        val: 3
      }, {
        label: '退款中',
        val: 8
      }, {
        label: '已退款',
        value: 9
      }],
      times: ['09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'],
      form: {
        company: '',
        city: 0,
        status: '',
        download: 0,
        mobile: ''
      },
      company: {
        array: [],
        json: {}
      },
      tableData: {
        data: [],
        current_page: 0,
        per_page: 0,
        total: 0
      },
      editStatus: false,
      shops: [],
      order: {
        city: 0,
        mobile: '',
        date: '',
        time: '',
        kefu_note: '',
        user_name: ''
      },
      cleanCityActive: false
    }
  },
  watch: {
    'tableData.current_page'() {
      this.getOrders()
    }
  },
  created() {
    this.getCompanies()
    this.getOrders()
  },
  methods: {
    getCompanies() {
      company.list().then(res => {
        this.company = res
      })
    },
    getOrders() {
      const download = this.form.download
      order.list(this.tableData.current_page, this.form).then(res => {
        if (download) {
          location.href = res.data.file
          return
        }
        const orders = res.data
        orders.data.map(order => {
          order.short_time = order.time ? order.time.substr(5, 11) : ''
          order.finish_at = order.finish_at ? order.finish_at.substr(5, 11) : ''
          return order
        })
        this.tableData = orders
        console.log('订单信息')
        console.log(orders)
      }).catch(res => {})
    },
    confirm(index) {
      this.$confirm('确定吗').then(res => {
        const info = this.tableData.data[index]
        order.confirm(info.sn).then(res => {
          this.getOrders()
        })
      }).catch(() => {})
    },
    // 结束订单
    finish(index) {
      this.$confirm('确定结束吗').then(res => {
        const info = this.tableData.data[index]
        order.finish(info.sn).then(res => {
          this.getOrders()
        })
      }).catch(() => {})
    },
    // 取消订单
    cancel(id) {
      this.$confirm('确定重置该订单吗').then(res => {
        order.cancel(id).then(res => {
          this.$message.success(res.message)
          this.getOrders()
        }).catch((res) => {
          //
        })
      })
    },
    setCity(city) {
      this.order.city = city
      console.log(city)
      this.getShops(city)
    },
    cleanCity() {
      this.form.city = 0
      this.cleanCityActive = true
      this.$nextTick(() => {
        this.cleanCityActive = false
      }, 1000)
    },
    getShops(cityId) {
      orm.list('Shop', [['city', '=', cityId], ['company', '=', this.order.company]]).then(res => {
        this.shops = res.data.data
      })
    },
    toEditOrder(order) {
      order.city = parseInt(order.city)
      this.order = order
      if (this.order.time) {
        this.order.date = this.order.time.substr(0, 10)
        this.order.time = this.order.time.substr(11, 5)
      } else {
        this.order.date = ''
        this.order.time = ''
      }
      this.getShops(order.city)
      this.editStatus = true
    },
    save() {
      const orderInfo = this.order
      const data = {}
      const keys = ['city', 'shop', 'date', 'time', 'kefu_note', 'user_name', 'photoer_name', 'photoer_mobile']
      keys.forEach(key => {
        data[key] = orderInfo[key]
      })
      data.time = data.date + ' ' + data.time + ':00'
      this.$confirm('确定提交吗').then(res => {
        order.update(orderInfo.id, data).then(res => {
          this.getOrders()
          this.editStatus = false
        }).catch(() => {})
      }).catch(res => {})
    },
    download() {
      this.form.download = 1
      setTimeout(() => { this.form.download = 0 }, 1000)
      this.getOrders()
    }
  }
}
</script>

<style scoped>

</style>
